<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
</head>
<body>
//button形式
<form action="#" id="myform1" method="get">
    姓名：<input type="text" name="uname" id="uname"><br>
    <span id="unameMsg" style="color: red;"></span><br>
    密码：<input type="password" name="upwd" id="upwd"><br>
    <span id="upwdMsg" style="color: red;"></span><br>
    <input type="button" onclick="login()" value="登录">
</form>
<hr>
//submit形式,要返回true才能提交成功
<form action="#" id="myform2" method="get">
    姓名：<input type="text" name="uname" id="uname2" ><br>
    <span id="unameMsg2" style="color: red;"></span><br>
    密码：<input type="password" name="upwd" id="upwd2"><br>
    <span id="upwdMsg2" style="color: red;"></span><br>
    <input type="submit" onclick="return login2()" value="登录">
</form>
<hr>
//第三种形式看js表单验证



<script>
    function login(){
        //条件判断
        //1.得到姓名和密码
        var uname=document.getElementById("uname").value;
        var upwd=document.getElementById("upwd").value;
        //判断用户名和密码是否为空
        if (uname == null || uname.trim() == ""){//去除前后空格
            document.getElementById("unameMsg").innerHTML="姓名不能为空";
            return false;
        }else{
            document.getElementById("unameMsg").innerHTML="";

        }
        if (upwd == null || upwd.trim() == ""){//去除前后空格
            document.getElementById("upwdMsg").innerHTML="密码不能为空";
            return false;
        }
        //以上验证通过，表单提交
        document.getElementById("myform1").submit();
    }




    function login2(){
        //条件判断
        //1.得到姓名和密码
        var uname2=document.getElementById("uname2").value;
        var upwd2=document.getElementById("upwd2").value;
        //判断用户名和密码是否为空
        if (uname2 == null || uname2.trim() == ""){//去除前后空格
            document.getElementById("unameMsg2").innerHTML="姓名不能为空";
            return false;
        }else{
            document.getElementById("unameMsg2").innerHTML="";
            //先不返回
        }
        if (upwd2 == null || upwd2.trim() == ""){//去除前后空格
            document.getElementById("upwdMsg2").innerHTML="密码不能为空";
            return false;
        }

        //以上验证通过，返回true，表单提交
        return true;
    }






</script>

</body>
</html>